<template>
  <el-container>
    <!-- 头部 -->
     <el-row class="logo">
        <!-- 左侧logo -->
        <el-col :span="12" >
          <div class="grid-content bg-purple">
            <router-link to="/" tag="a">
              <img src="./assets/hummer.png" alt>
            </router-link>
          </div>
        </el-col>
        <!-- 右侧导航 -->
        <el-col :span="12" class="right">
          
           <!-- :default-active="activeIndex"   -->
           <!-- 当前激活菜单的是哪个 -->
          <el-menu
            default-active="this.$route.path" 
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#161922"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
          <!-- 登录弹出框 -->
             <el-menu-item @click="login = true" index="/" min-width='60'>{{$t("message.login")}}</el-menu-item>
            <el-dialog :title="$t('message.welcome')" :visible.sync="login" :before-close="handleClose" center >
              <el-form :model="form">
                <el-form-item :label="$t('message.welcome')"  :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label="$t('message.password')" :label-width="formLabelWidth">
                  <el-input v-model="form.region" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="login =false">{{$t("message.cancel")}}</el-button>
                <el-button type="primary" @click="login = false">{{$t("message.submit")}}</el-button>
              </div>
            </el-dialog>
            <el-menu-item index="/tools" min-width='60'>{{$t("message.Tools")}}</el-menu-item>
              <el-menu-item index="/test" min-width='60'>测试</el-menu-item>
            <el-submenu index="3"  >
              <template slot="title">{{$t("message.title")}}</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
              <el-menu-item index="3-3">选项3</el-menu-item>
              <el-submenu index="3-4">
                <template slot="title">选项4</template>
                <el-menu-item index="3-4-1">选项1</el-menu-item>
                <el-menu-item index="3-4-2">选项2</el-menu-item>
                <el-menu-item index="3-4-3">选项3</el-menu-item>
              </el-submenu>
            </el-submenu>
             <!-- 国际化 -->
               <el-menu-item  v-if="lang ==='eng'" @click="changeCn" min-width='60'>中文</el-menu-item>
               <el-menu-item  v-else="lang ==='cn'" @click="changeEn" min-width='60'>English</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <!-- 背景图 -->
    <el-header :style="setBackground ">
    </el-header>
    <!-- 不同组件显示区域 -->
    <el-main style="padding:80px 0">
      <router-view></router-view>
    </el-main>
    <!-- 底部 -->
    <el-footer style="height:240px " v-show="flag">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <img src="./assets/22.png" alt>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div class="footer_right">
              <h2>{{$t("message.connact")}}</h2>
              <div>
                <i class="el-icon-message"></i>
                <span>hr@cynosure-chain.com</span>
              </div>
              <div>
                <i class="el-icon-phone"></i>
                <span>0755-26922865</span>
              </div>
              <div>
                <i class="el-icon-location"></i>
                <span>{{$t("message.address")}}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      //背景图样式
    setBackground:{
        backgroundImage:"url(" + require("./assets/kiangji.jpg") + ")",
        backgroundPosition: "center",
        width:'100%',
       backgroundSize:'cover'
    },
   
      //国际化标识
        lang:'eng',
      // activeIndex: '1',
      flag: true,
      //顶部的logo消失
      // flag1:true,
      screenWidth: document.body.clientWidth,
      //弹出框的数据
       login: false,
        form: {
          name: '',
          region: '',
        },
        formLabelWidth:'120px',
    };
  },
  created() {
    //获取到body
    document.querySelector("body").setAttribute("style", "margin:0");
  },
  mounted() {
    let that = this;
    window.addEventListener("resize", function() {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    });
  },
  watch: {
    //监测宽度
    screenWidth(val) {
      this.screenWidth = val;
      if (this.screenWidth < 1280) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    //   if(this.screenWidth < 960){
    //     this.flag1 = false;
    //   }else{
    //     this.flag1 = true;
    //   }
     }
  },
  methods: {
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      //登录
    handleClose(done) {
      if( this.lang =="cn"){
          this.$confirm("sure?")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }else{
        this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
    },
     //国际化
    changeCn(){
      this.lang ="cn";
      this.$i18n.locale = "en"; 
      //动态改背景图
      this.setBackground.backgroundImage= "url(" + require("./assets/eng.jpg") + ")"
    },
    changeEn(){
      this.lang ="eng";
      this.$i18n.locale = "cn";
      this.setBackground.backgroundImage= "url(" + require("./assets/kiangji.jpg") + ")"
    }
  },

};
</script>
<style lang="less" scoped>
.el-footer {
  background-color: #161922;
  padding-top: 40px;
  img {
    margin-top: 60px;
    margin-left: 430px;
    width: 300px;
    height: 40px;
  }
  .footer_right {
    margin-left: 170px;
    h2,
    i,
    span {
      color: #fff;
    }
    div {
      margin-bottom: 3px;
      span {
        margin-left: 5px;
        font-size: 14px;
      }
      i {
        font-size: 14px;
      }
    }
  }
}
  .logo {
    width: 100%;
    background-color:#161922;
    //右侧文字
   .right {
      margin-bottom: 0;
      .el-menu.el-menu--horizontal{
      float: right;
      border: none;
       margin-top: 15px;
       margin-right: 50px;
       /deep/.el-submenu{
         .el-submenu__title{
         font-size: 20px;
        }
       }
         .el-menu-item{
          font-size: 20px;
       } 
    }
  }
  //logo图片
  .grid-content {
    min-height: 36px;
    img {
      margin-top: 20px;
      margin-left: 40px;
      width: 400px;
      height: 50px;
      float: left;
    }
  }
    }
.el-header {
  height: 720px!important;
  
}

.el-main {
  background-color: #f6f6f6;
  color: #333;
  text-align: center;
}
</style>